<template>
  <div class="layout-row">
    <div class="flex1 ww100 relative flex-ss overlay warp hidden plr5" v-if="!isNull(publicStore._public.cfg)">
      <!-- 曲线 -->
       <div class="ww100 hh50 p5 flex-col" v-for="(v, i) in publicStore._public.cfg.values" :key="i">
        <div class="fw f20 mb20">{{v.name}}曲线</div>
        <div class="flex1" :id="'Line'+i"></div>
      </div>
      <!-- 局放- PRPD图 -->
      <div class="ww50 hh50 p5 flex-col">
        <div class="fw f20 mb20">局放-PRPD图谱</div>
        <div class="flex1 ww100" id="Scatter_l"></div>
      </div>
      <!-- 局放- PRPD图 -->
      <div class="ww50 hh50 p5 flex-col">
        <div class="fw f20 mb20">局放-PRPS图谱</div>
        <div class="flex1 ww100" id="Bar3d_l"></div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import ec from "@/utils/chart";
const { drawChart } = ec();
const { proxy }: any = getCurrentInstance();
const publicStore = proxy.publicStore();
const state = reactive({
  ...publicStore.$state,
});

const getCfg = () => {
  let cfg
  publicStore._public.cfg.values.forEach((v, i)=> {
    let temp_cfg = {name: v.name, dw: v.dw, legendArr: [''], min: 0, max: 100}
    cfg = Object.assign(temp_cfg, publicStore._public.cfg) 
  })
  return cfg
}

watch(() => publicStore.data, async (val) => {
  if(proxy.isNull(val)) return console.log('自定义报错-------------------------未定义data')
  if(proxy.isNull(publicStore._public.cfg.values)) return console.log('自定义报错-------------------------未定义cfg')
  publicStore._public.cfg.values.forEach((v, i)=> {
    let temp_cfg = {name: v.name, dw: v.dw, legendArr: [''], min: 0, max: 100}
    let cfg = Object.assign(temp_cfg, publicStore._public.cfg) 
    if(cfg['min_' + (i + 1)]) cfg.min = cfg['min_' + (i + 1)]
    if(cfg['max_' + (i + 1)]) cfg.max = cfg['max_' + (i + 1)]
    Line(val[i], i, cfg)
  })
},{ immediate: false, deep: true });

watch(() => publicStore._public.prpd, async (val) => {
  await nextTick();
  setChart_Scatter(val);
},{ immediate: false, deep: true });

watch(() => publicStore._public.prps, async (val) => {
  await nextTick();
  setChart_Bar3d(val);
},{ immediate: false, deep: true });

const Line = async (data, i, cfg) => {
  let series = [{data}]
  drawChart("Line", "Line"+i, cfg, {series: series, xAxis: {type: 'category', boundaryGap: false}});
};

const setChart_Scatter = async (val) => {
  // let cfg = {legendArr: [''], min: 0, max: 2, dw: '', p: 100} //模拟
  let cfg = getCfg()
  let data = !proxy.isNull(val)? val : await getData_Scatter(val, cfg)
  drawChart("Scatter", "Scatter_l", cfg, {series: [{data}]});
};

const setChart_Bar3d = async (val) => {
  // let cfg = {legendArr: [''], min: 0, max: 2, dw: '', p: 100} //模拟
  let cfg = getCfg()
  let data =!proxy.isNull(val)? val : await getData_Bar3d(val, cfg)
  drawChart("Bar3d", "Bar3d_l", cfg, data);
};

const getData_Scatter = async (val, cfg) => {
  console.log('生成-getData_Scatter')
  let tempArr = []
  let p = cfg.p
  let m = 360
  for(let x = 0; x < m; x++){
    tempArr.push([x, Math.random()])
  }
  return tempArr
}; 

const getData_Bar3d = async (val, cfg) => {
  console.log('生成-getData_Bar3d')
  let tempArr = []
  let p = cfg.p
  let m = 360
  for(let x = 0; x < p; x++){
    for(let y = 0; y < m; y++){
      tempArr.push([x, y, Math.random()])
    }
  }
  return tempArr
};

</script>

<style scoped lang="scss">

</style>
